var data_get = undefined;
document.addEventListener('DOMContentLoaded', function () {

    console.log(task_id);

    var params = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json' // 请求头部
        },
        body: JSON.stringify({ // 请求体
            task_id: task_id,
            taskdata_id: taskdata_id
        })
    };

    fetch('http://localhost:8000/annotating_data/image_get/', params)
        .then(response => response.json())
        .then(data => {
            //console.log(data);
            data_get = data;
            // console.log(data_get);
            handleData(data_get);
        })
        .catch(error => {
            console.error('Error:', error);
        });
});

var labelStudio;

function handleData(data) {
    // console.log(data); // 在处理函数中访问data_get的值


console.log(data_get);
    labelStudio = new LabelStudio('label-studio', {
        config: data.config,

        interfaces: [
            "panel",
            "update",
            "submit",
            "skip",
            "controls",
            //"review",
            "infobar",
            "topbar",
            "instruction",
            "side-column",
            "ground-truth",
            // "annotations:tabs", # 人
            "annotations:menu",
            "annotations:current",
            "annotations:add-new",
            "annotations:delete",
            'annotations:view-all',
            "predictions:tabs",
            "predictions:menu",
            "auto-annotation",
            "edit-history",
            //"topbar:prevnext",
        ],
        user: data.user,
        task: data.task

    });


    labelStudio.on("submitAnnotation", (LS, annotation) => {
        // Retrieve an annotation in JSON format
        //console.log(annotation.serializeAnnotation())
        var data = {
            result: annotation.serializeAnnotation(),
            task_id: task_id,
            taskdata_id: taskdata_id
        };
        console.log(annotation.serializeAnnotation())
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

        fetch('http://localhost:8000/annotating_data/image_submit/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken  // 添加 CSRF token 到请求头部
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                // 处理响应
                console.log('Data sent successfully');
            })
            .catch(error => {
                // 处理错误
                console.error('Error:', error);
            });
    });
//
// var result
    const annotationHistory = {}
    labelStudio.on("storageInitialized", (store) => {
        //console.log('标记1')
        labelStudio.on("selectAnnotation", (next) => {
            if (next.type === 'annotation') {
                store.setHistory(annotationHistory)
            }
        })
        labelStudio.on("updateAnnotation", (_, annotation) => {
            console.log(annotation.serializeAnnotation());
            var data = {
                result: annotation.serializeAnnotation(),
                task_id: task_id,
                taskdata_id: taskdata_id
            };

            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

            fetch('http://localhost:8000/annotating_data/image_submit/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken  // 添加 CSRF token 到请求头部
                },
                body: JSON.stringify(data)
            })
                .then(response => {
                    // 处理响应
                    console.log('Data sent successfully');
                })
                .catch(error => {
                    // 处理错误
                    console.error('Error:', error);
                });
            // result = annotation.serializeAnnotation()
        })
        labelStudio.on("regionFinishedDrawing", (region, list) => {
            console.log("finish drawing", {region, list})
        })
    })
    console.log('开始加载')
}


/////
